<template>
  <Theme>
    <div class="Main">
      <!-- 新增输入框 -->
      <a-input-search
        ref=""
        placeholder="new task"
        size="large"
        v-model="content.text"
        @search="insert"
      >
        <a-button type="link" style="color: #7cb9ff" slot="enterButton">
          ADD
        </a-button>
      </a-input-search>
      <div>
        <!-- 列表区域 -->
        <a-list
          :split="false"
          ref="MianList"
          class="MainList"
          item-layout="horizontal"
          :data-source="data"
        >
          <a-list-item
            class="listItem"
            slot="renderItem"
            slot-scope="item, index"
          >
            <a-row type="flex" align="middle" :gutter="0">
              <a-col flex="10px">
                <!-- 删除按钮 -->
                <a-button
                  type="danger"
                  size="small"
                  icon="close"
                  @click="DeleteItem(index, item)"
                ></a-button>
              </a-col>
              <a-col flex="10px">
                <!-- 单选框 -->
                <a-checkbox
                  style="margin: 5px"
                  :checked="item.status"
                  :value="item.text"
                  @change="onChange"
                  @click="getIndex(index)"
                >
                </a-checkbox>
              </a-col>
              <a-col flex="auto">
                <!-- 文本区域 -->
                <div class="content">
                  <div
                    v-if="checkChange === index ? !inputVisible : true"
                    @click="getInput(index, item)"
                  >
                    <div class="text" v-if="item.status">
                      <del style="color: red">{{ item.text }}</del>
                    </div>
                    <div class="text" v-else style="color: #3f5e5d">
                      {{ item.text }}
                    </div>
                  </div>
                  <a-input
                    @blur="inputChange(index, item)"
                    ref="input"
                    v-if="checkChange === index && inputVisible"
                    :value="inputValue"
                    v-model="inputValue"
                    @keyup.enter="inputChange(index, item)"
                    onPressEnter=""
                  ></a-input>
                </div>
              </a-col>
            </a-row>
          </a-list-item>
        </a-list>
        <!-- 底部按钮 -->
        <div class="clear">
          <!-- 撤销删除 -->
          <a-button type="link" @click="BackOut"> BackOut </a-button>
          <!-- 清空数据 -->
          <a-button @click="clearAll" style="color: red" type="link">
            Clear
          </a-button>
        </div>
      </div>
    </div>
  </Theme>
</template>

<script>
import Vue from "vue";
import History from "../components/historyList.vue";
import Theme from "../components/Theme.vue";
export default {
  name: "Home",
  components: {
    History,
    Theme,
  },
  data() {
    return {
      checkOption: false,
      HistoryData: [], //历史记录数据域
      HistoryVisible: false, //历史记录可视
      visible: true, //可视
      modelData: [], //弹窗内输入框默认值
      inputVisible: false, //输入框可视
      inputValue: "", // 输入框值
      content: {
        //新增输入框绑定值
        text: "",
        status: false,
      },
      checkIndex: 1, //多选框序号检查点
      checkChange: 1, //更改框序号检查点
      checked: false, //选中检查点
      data: [], //列表数据
      deleteDate: [], //删除存储区
    };
  },
  mounted() {
    this.getList();
  },

  methods: {
    insert() {
      const _data = this.content;
      if (_data.text) {
        this.data.push({ text: _data.text, status: _data.status });
        this.HistoryData.push({ text: _data.text });
      }
      console.log(_data, this.HistoryData);
      this.content = {
        text: "",
        status: false,
      };
    },
    DeleteItem(index, item) {
      console.log(index);
      this.deleteDate.push(item);
      this.data.splice(index, 1);
      this.checked = false;
      this.getIndex();
    },
    clearAll() {
      let index;
      for (index in this.data) this.deleteDate.push(this.data[index]);
      this.data = [];
    },
    getIndex(index) {
      if (index != null) this.checkIndex = index;
      console.log(index);
      console.log(this.checkIndex);
    },

    onChange(e) {
      this.getIndex();
      let NewData = {
        text: e.target.value,
        status: false,
      };
      if (e.target.checked) {
        NewData.status = true;
      }
      Vue.set(this.data, this.checkIndex, NewData);
    },
    getList() {
      this.$axios({
        url: "/test",
        method: "post",
        data:{
          username:window.sessionStorage.getItem('username')
        }
      }).then((res) => {
        this.data = res.data.data.list;
      });
    },
    getInput(index, item) {
      this.checkChange = index;
      this.inputVisible = true;
      this.inputValue = item.text;
      this.visible = false;
      this.$nextTick((_) => {
        console.log(this);
        this.$refs.input.$refs.input.focus();
      });
    },
    unfocus() {
      this.inputVisible = false;
    },
    inputChange(index, item) {
      this.checkChange = index;
      this.inputVisible = false;
      console.log(item);
      item.text = this.inputValue;
      Vue.set(this.data, index, item);
      this.visible = true;
    },
    BackOut() {
      let index;
      for (index in this.deleteDate) this.data.push(this.deleteDate[index]);
      this.deleteDate = [];
      console.log(this.deleteDate, this.data, index);
    },
  },
};
</script>

<style scoped>
.Main {
  width: 35%;
  min-width: 300px;
  margin: 0 auto;
  text-align: center;
}
.text {
  vertical-align: middle;
  font-weight: bold;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content {
  font-size: 18px;
}
.MainList {
  text-align: left;
  max-height: 300px;
  overflow-y: auto;
  padding: 20px;
  margin-top: 20px;
  background: white;
}
.listItem {
  border-bottom-style: solid;
  border-bottom-color: #6cb0ff;
  border-bottom-width: 2px;
  height: 50px;
}

.clear {
  background: white;
  color: red;
  text-align: right;
}
</style>
